window.onload = function(){
    leftSwipe();
    rightSwipe();

}

//点击盒子 并移动 touch三个事件  向上最大滑动距离 向下最大滑动距离
function leftSwipe(){
    //获取元素
    var parentBox = document.querySelector('.jd_category_left');//获取父盒子
    var childBox = parentBox.querySelector('ul');//获取子盒子
    var parentHeight = parentBox.offsetHeight; //父盒子高度
    var childHeight = childBox.offsetHeight;//子盒子高度

    var maxY = 0;//最大的位置 就是0的位置
    var minY = parentHeight - childHeight;//最小的位置 就是父盒子减去子盒子的高度 下面的位置
    var maxSwipe = maxY + 100; //最大可缓动的距离 向下滑动
    var minSwipe = minY - 100;//最小可缓动的距离  向上滑动

    //左侧盒子
    //设置过渡
    var addTransition = function(){
        childBox.style.transition = "all .2s";
        childBox.style.webkitTransition = "all .2s";
    }
    //清除过渡
    var removeTransition = function(){
        childBox.style.transition = "none";
        childBox.style.webkitTransition =  "none";
    }
    //设置定位
    var setTranslateY = function(y){
        childBox.style.transform = "translateY("+y+"px)";
        childBox.style.webkitTransform = "translateY("+y+"px)";
    }

    var startY = 0;
    var moveY = 0;
    var distanceY = 0;
    var isMove =false;
    var currY = null; //记录当前的位置
    //绑定触摸事件
    childBox.addEventListener("touchstart",function(e){
        startY = e.touches[0].clientY;

    });
    childBox.addEventListener("touchmove",function(e){
        isMove=true;
        moveY = e.touches[0].clientY;
        distanceY = moveY - startY;
        removeTransition();
        if((distanceY+currY)<maxSwipe && (distanceY+currY) >minSwipe){
            setTranslateY(distanceY+currY);
        }

    });
    childBox.addEventListener("touchend",function(){
        if((distanceY+currY)>maxY){
            currY = maxY;
            addTransition();
            setTranslateY(currY);
        }else if((distanceY+currY)<minY){
            currY = minY;
            addTransition();
            setTranslateY(currY);
        }else {
            currY = currY + distanceY; //当前位置 = 上一次的位置+移动的距离
        }
        //参数重置
        startY = 0;
        moveY =0;
        distanceY=0;
        isMove=false;
    });



    //绑定tap事件  点击当前li 改变样式
    var isMove = false;
    var startTime = 0;
    var lis = childBox.querySelectorAll('li');//获取所有的li

    childBox.addEventListener("touchstart",function(){
        startTime = Date.now();
    });
    childBox.addEventListener("touchmove",function(){
        isMove=true;//如果滑动了就不会进入下面的程序
    });
    childBox.addEventListener("touchend",function(e){
        //当手指离开时，判断点击时间是否超过150毫秒，没有超过的情况，视为点击事件 并且给当前li添加样式 并且没有移动的情况
        if(!isMove &&(Date.now() - startTime)<150){
            //被点击的事件源就是a标签的父元素li
            var li = e.target.parentNode;
            for(var i = 0; i < lis.length;i++){
                lis[i].className = "";
                lis[i].index = i;
            }
            li.className = "now";

            var translateY = -li.index*50;
            if(translateY>minY){
                currY = translateY;
                addTransition();
                setTranslateY(currY);
            }else{
                currY = minY;
                addTransition();
                setTranslateY(currY);
            }
        }
    })
}

// 点击当前li 判断是点击还是移动 150毫秒内属于点击（判断当前的位置 是否让其在0的位置显示 ），否则是移动

/*右侧内容*/
function rightSwipe() {
    /*通过封装的swipe插件来实现*/
    itcast.iScroll({
        swipeDom: document.querySelector('.jd_category_right'), /*父容器对象*/
        swipeType: 'y', /*滑动的方向*/
        swipeDistance: 100/*缓冲的距离*/
    });
}